/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 优惠券详情
 */
import React, {PureComponent} from "react";
import {
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    Image,
    View,
    ToastAndroid,
    ScrollView,
    Button,
    Text,
    TextInput,
    FlatList
} from "react-native";
import color from "../../../widget/color";
import api from "../../../api/api";
import method from "../../../api/method";
import {fetchGetRequest} from "../../../api/NetworkTool";
import {DefaultTabBar, ScrollableTabBar} from "react-native-scrollable-tab-view";
const {width} = Dimensions.get('window').width
const {height} = Dimensions.get('window').height
type Props = {
    navigation: any,
}

export default class CouponDetailScene extends PureComponent<Props> {

    static navigationOptions = ({navigation}: any) => ({
        headerTintColor: 'white',
        title: '优惠券详情',
        headerStyle: {
            backgroundColor: color.primary,
            borderBottomColor: color.primary,
        },
        headerRight: <Text/>,
        headerLeft:<TouchableOpacity onPress={()=>{
            navigation.goBack()
        }}>
            <Image style={{marginLeft:12}} source={require('../../../../res/img/video/back.png')}/>
        </TouchableOpacity>,


    });

    constructor(props) {
        super(props)
        this.state = {
            coupon_sn: '',

            coupon: {
                title: '',
                count: '',
                price: '',
                start_datetime: '',
                end_datetime: '',
                suit_device: '',
                rule: '',
                tag: ''
            }
        }
    }

    componentDidMount() {
        const {info} = this.props.navigation.state.params
        this.setState({
            coupon_sn: info.coupon_sn,
            tag: info.tag
        })
        this.requesDetail(info.coupon_sn)
    }

    requesDetail(coupon_sn) {
        fetchGetRequest(api.couponDetail, method.get, {coupon_sn: coupon_sn})
            .then(res => {
                console.log(res)
                this.setState({
                    coupon: res.coupon,
                })
                // alert(this.state.coupon.title)
            }).catch(err => {
        })
    }


    render() {
        const coupon = this.state.coupon

        let expireTime = ''
        if (coupon.end_datetime.substring(0, 4) == '2099') {
            expireTime = '永久有效'
        } else {
            let start = coupon.start_datetime.substring(0, 10)
            let end = coupon.end_datetime.substring(0, 10)
            expireTime = start + '至' + end
        }

        return (
            <View style={styles.container}>
                {this.whichTag(this.state.tag, coupon, expireTime)}
                <View style={{marginTop:15,backgroundColor:'white',height:height,flex:1}}>
                    <View style={styles.rowinfo}>
                        <Text style={styles.rowContentLeft}>券号</Text>
                        <Text style={styles.rowContentRight}>{this.state.coupon_sn}</Text>
                    </View>
                    <View style={styles.rowinfo}>
                        <Text style={styles.rowContentLeft}>有效期</Text>
                        <Text
                            style={styles.rowContentRight}>{expireTime}</Text>
                    </View>
                    <View style={styles.rowinfo}>
                        <Text style={styles.rowContentLeft}>用券终端</Text>
                        <Text style={styles.rowContentRight}>{coupon.suit_device}</Text>
                    </View>
                    <View style={styles.rowinfo}>
                        <Text style={styles.rowContentLeft}>使用规则</Text>
                        <View>
                            <FlatList
                                data={coupon.rule.split(' ')}
                                renderItem={this.renderCell}
                                keyExtractor={this.keyExtractor}

                            />
                        </View>
                    </View>
                </View>
            </View>
        );
    }

    /**
     *
     * @param tag 从列表界面传递过来的标识符，用于判断优惠券状态
     * @param coupon 请求到的数据
     * @param expireTime 过期时间
     * @returns {XML}
     */
    whichTag(tag, coupon, expireTime) {

        if (tag == 'unuse_tag') {
            return (
                <View style={{ marginLeft: 12,
        marginRight: 12}}>
                    <Image style={styles.coupon_bg} source={require('../../../../res/img/coupon/unuse.png')}/>
                    <View style={{position:'absolute',flexDirection:'row'}}>
                        <View style={{flexDirection:'row',marginLeft:18,marginTop:15}}>

                            <View style={{flexDirection:'column'}}>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={styles.price_tag}>￥</Text>
                                    <Text style={styles.price}>{coupon.price}</Text>
                                </View>
                                <Text style={styles.price_below}>立即使用</Text>
                            </View>
                        </View>
                        <View
                            style={{flexDirection:'column',marginLeft:50,alignItems:'flex-start',justifyContent:'center',marginTop:14}}>
                            <Text style={styles.name}>{coupon.title}</Text>
                            <View style={{flexDirection:'row',marginTop:10}}>
                                <Text style={styles.time}>有效期 </Text>
                                <Text
                                    style={styles.time}>{expireTime}</Text>
                            </View>
                            <Image style={styles.line}
                                   source={require('../../../../res/img/coupon/separate_line.png')}/>
                            <Text style={styles.use}>使用说明</Text>
                        </View>
                    </View>
                </View>
            )
        } else if (tag == 'used_tag') {
            return (<View style={{ marginLeft: 12,
        marginRight: 12}}>
                <Image style={styles.coupon_bg} source={require('../../../../res/img/coupon/used.png')}/>
                <View style={{position:'absolute',flexDirection:'row'}}>
                    <View style={{flexDirection:'row',marginLeft:18,marginTop:15}}>

                        <View style={{flexDirection:'column'}}>
                            <View style={{flexDirection:'row'}}>
                                <Text style={styles.price_tag}>￥</Text>
                                <Text style={styles.price}>{coupon.price}</Text>
                            </View>
                            <Text style={styles.price_below}>立即使用</Text>
                        </View>
                    </View>
                    <View
                        style={{flexDirection:'column',marginLeft:50,alignItems:'flex-start',justifyContent:'center',marginTop:14}}>
                        <Text style={styles.name}>{coupon.title}</Text>
                        <View style={{flexDirection:'row',marginTop:10}}>
                            <Text style={styles.time}>有效期 </Text>
                            <Text
                                style={styles.time}>{expireTime}</Text>
                        </View>
                        <Image style={styles.line}
                               source={require('../../../../res/img/coupon/separate_line.png')}/>
                        <Text style={styles.use}>使用说明</Text>
                    </View>
                    <Image style={styles.coupon_tag} source={require('../../../../res/img/coupon/coupon_tag.png')}/>
                </View>
            </View>)
        } else if (tag == 'overtime_tag') {
            return (<View style={{ marginLeft: 12,
        marginRight: 12}}>
                <Image style={styles.coupon_bg} source={require('../../../../res/img/coupon/used.png')}/>
                <View style={{position:'absolute',flexDirection:'row'}}>
                    <View style={{flexDirection:'row',marginLeft:18,marginTop:15}}>

                        <View style={{flexDirection:'column'}}>
                            <View style={{flexDirection:'row'}}>
                                <Text style={styles.price_tag}>￥</Text>
                                <Text style={styles.price}>{coupon.price}</Text>
                            </View>
                            <Text style={styles.price_below}>立即使用</Text>
                        </View>
                    </View>
                    <View
                        style={{flexDirection:'column',marginLeft:50,alignItems:'flex-start',justifyContent:'center',marginTop:14}}>
                        <Text style={styles.name}>{coupon.title}</Text>
                        <View style={{flexDirection:'row',marginTop:10}}>
                            <Text style={styles.time}>有效期 </Text>
                            <Text
                                style={styles.time}>{expireTime}</Text>
                        </View>
                        <Image style={styles.line}
                               source={require('../../../../res/img/coupon/separate_line.png')}/>
                        <Text style={styles.use}>使用说明</Text>
                    </View>
                    <Image style={styles.coupon_tag} source={require('../../../../res/img/coupon/overtime.png')}/>
                </View>
            </View>)
        }


    }

    keyExtractor = (item: Object, index: number) => {
        return item.id + ''
    }

    renderCell = (rowData: any) => {
        return (
            <View style={{flexDirection:'row',}}>
                <Image style={styles.lingxing2}
                       source={require('../../../../res/img/coupon/lingxing.png')}/>
                <Text
                    style={styles.rowContentRight}>{rowData.item}</Text>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 15,
    },
    lineStyle: {
        height: 0,
    },
    coupon_bg: {
        width: width,
        height: 96,
        position: 'relative',
    },
    price_tag: {
        fontWeight: 'bold',
        fontSize: 12,
        color: "white",
        marginTop: 25
    },
    price: {
        fontWeight: 'bold',
        fontSize: 35,
        color: "white"
    },
    price_below: {
        fontWeight: 'bold',
        fontSize: 11,
        color: "white",
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 6
    },
    name: {
        fontWeight: 'bold',
        fontSize: 14,
        color: "rgba(0,0,0,0.8)"
    },
    time: {
        fontWeight: 'bold',
        fontSize: 11,
        color: "rgba(0,0,0,0.4)"
    },
    use: {
        fontWeight: 'bold',
        fontSize: 12,
        color: "#DB3843",
        alignItems: 'center',
        justifyContent: 'center'
    },
    line: {
        marginRight: 12,
        height: 1,
        width: 227,
        marginTop: 5,
        marginBottom: 5
    },
    rowinfo: {
        flexDirection: 'row',
        marginTop: 10
    },
    rowContentLeft: {
        fontSize: 12,
        width: 60,
        color: "rgba(0,0,0,0.4)",
        marginLeft: 12
    },
    rowContentRight: {
        fontSize: 12,
        color: "rgba(0,0,0,0.8)",
        marginLeft: 6,
        marginRight: 14,
        width: 280
    },
    lingxing: {
        width: 7,
        height: 7,
    },
    lingxing2: {
        width: 7,
        height: 7,
        marginTop: 5
    },
    coupon_tag: {
        width: 80,
        height: 80,
        marginTop: 8,
        marginLeft: 40,
        position: 'absolute',
        marginLeft: 260
    },

});


